/*
* 主界面路由页面*/
import React,{Component} from "react";
import {
    NavBar,
    WingBlank,
    List,
    InputItem,
    WhiteSpace,
    Radio,
    Button,
    Toast

} from "antd-mobile"
import {Redirect} from "react-router-dom";
import {connect} from 'react-redux'
import {register} from "../../redux/actions";
import Logo from "../../components/logo/logo"

const RadioItem =Radio.RadioItem
const ListItem = List.Item
class Register extends Component{
    state ={
        username:'',
        password:'',
        password2:'',
        type:"老板"
    }
    //登录按钮
    toLogin=()=>{
        this.props.history.replace('/login')
    }
    //注册按钮
    register=()=>{
        this.props.register(this.state)
        //Toast.success('注册成功')
    }
    //处理输入数据的改变，更新对应的状态
    handleChange=(name,value)=>{
        //调试
        console.log(name,value)
        //更新状态
        this.setState({
            [name]:value
        })
    }
    render() {
        const data =[{value:0,label:"大神"},{value:1,label:"老板"}]
        const {type} =this.state
        //console.log(this.props)
        const {msg,redirectTo} = this.props
        //如果有值，就要跳转到指定路由
        if (redirectTo){
            return <Redirect to ={redirectTo}></Redirect>
        }
        return(
            <div>
                <NavBar>招 聘</NavBar>
                <Logo></Logo>
                <WingBlank>
                    {msg==""? null:<p className="error-msg">{msg}</p>}
                    <List >

                        <InputItem onChange={value => {this.handleChange('username',value)}}>用户名：</InputItem>
                        <WhiteSpace> </WhiteSpace>
                        <InputItem type='password' onChange={value => {this.handleChange('password',value)}}>密 &nbsp;&nbsp;码：</InputItem>
                        <WhiteSpace> </WhiteSpace>
                        <InputItem type='password' onChange={value => {this.handleChange('password2',value)}}>确认密码：</InputItem>
                        <WhiteSpace> </WhiteSpace>
                        <ListItem>
                            <span>用户类型：</span>
                            {
                                data.map(i=>(
                                    <Radio key={i.value}  checked={type===i.label} onChange={()=>{this.handleChange("type",i.label)}}>{i.label}</Radio>
                                ))
                            }
                        </ListItem>
                        <WhiteSpace> </WhiteSpace>
                        <Button type='primary' onClick={this.register}>注册</Button>
                        <WhiteSpace> </WhiteSpace>
                        <Button onClick={this.toLogin}>登录</Button>
                    </List>
                </WingBlank>
            </div>
        )
    }
}

export default connect(
    state =>state.user,
    {register}
)(Register)
